<template>
  <el-dialog title="添加字段" :visible.sync="visible" width="800px" top="5vh" append-to-body>

    <el-form :model="model" :rules="rules" ref="form" size="small" label-width="110px">
      <el-row :gutter="10">
          <el-form-item label="中文名称" prop="columnComment">
            <el-input v-model="model.columnComment" type="text" placeholder="输入您要添加的属性中文名称" @input="onCommentChange" clearable/>
          </el-form-item>
          <el-form-item label="英文名称" prop="columnName">
            <el-input v-model="model.columnName" type="text" placeholder="输入您要添加的属性英文名称"  clearable/>
          </el-form-item>
        <el-form-item label="长度" prop="len">
          <el-input-number v-model="model.len" type="text" placeholder="默认100长度"  clearable/>
        </el-form-item>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onOK">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {pinyin} from 'pinyin-pro'
  import {addColumn} from '@/api/system/tableColumn'
  export default {
    props: {
      tableId: [String, Number]
    },
    data() {
      return {
        visible: false,
        model: {
          columnComment: '',
          columnName: '',
          len: 100
        },
        rules: {
          columnComment: [{required: true, message: '必填项'}],
          columnName: [{required: true, message: '必填项'}],
          len: [{required: true, message: '必填项'}]
        }
      }
    },
    methods: {
      show() {
        this.reset()
        this.visible = true
      },
      reset() {
        this.model = {
          columnComment: '',
          columnName: '',
          len: 100
        }
      },
      onCommentChange(val) {
        const py = pinyin(val, {toneType: 'none'})
        this.model.columnName = py.replaceAll(' ', '')
      },
      onOK() {
        this.$refs.form.validate(ok => {
          if(!ok) return

          addColumn({...this.model, tableId: this.tableId}).then(res => {
            this.$modal.msgSuccess(res.msg);
            if (res.code === 200) {
              this.visible = false;
              this.$emit("ok");
            }
          })

        })
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
